<template>
  <div class="layout">
    <div class="main">
      <div class="nav">
        <mu-tabs :value="activeTab" @change="handleTabChange" class="tab">
          <mu-tab value="recommend" title="个性推荐" to="/main/recommend"/>
          <mu-tab value="songList" title="歌单" to="/main/songList"/>
          <mu-tab value="radio" title="主播电台" to="/main/radio"/>
          <mu-tab value="leaderBoards" title="排行榜" to="/main/leaderBoards"/>
        </mu-tabs>
      </div>
    </div>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<script type="text/ecmascript-6">
  export default{
    data() {
      return {
        activeTab: ''
      }
    },
    methods: {
      handleTabChange (val) {
        this.activeTab = val
      }
    },
    created() {
      // 第一次进来的时候默认个性推荐
      if (this.$route.path === '/main') {
        this.activeTab = 'recommend'
      } else {
        this.activeTab = this.$route.path.substring(this.$route.path.lastIndexOf('/') + 1, this.$route.path.length)
      }
    }
  }
</script>

<style>
  .main{
    height: 3rem;
    position: fixed;
    top: 4rem;
    left: 0;
    right: 0;
    z-index: 10;
  }
  .main .mu-tabs{
    background: #fff;
    height: 3rem;
  }
  .main .mu-tab-text{
    color: #000;
  }
  .layout>.details{
    margin-top: 7rem;
  }
</style>
